<template>
	<!-- 提现 -->
	<view class=" " style="margin: 0 20rpx;">
		<fui-list-cell :bottomBorder="false" background="transparent " highlight>
			<view class=""
				style="flex: 1;display:flex;flex-direction: row;justify-content: space-between;align-items: center;height: 70rpx;">
				<view class=""
					style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;">
					<text>到账方式</text>
				</view>
				<view class=""
					style="font-size: 28rpx;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
					<image :src="baseUrl + 'icon/redEnvelopeIcon.png'" mode="widthFix"
						style="width: 50rpx;height: 50rpx;"></image>
					<view class="" style="margin-left: 10rpx;font-size: 28rpx;">
						加财务客服，微信转账
					</view>
				</view>
			</view>
		</fui-list-cell>

		<view class="" style="background-color: #fff;padding: 30rpx;">
			<view class="" style="font-weight: bold;">
				提现金额
			</view>

			<view class="" style="margin-top: 50rpx;">
				<!-- <text style="font-size: 40rpx;font-weight: bold;">¥</text> -->
				<fui-input label="¥" borderBottom="1" padding="50rpx 0" labelSize="60" labelWidth="0"
					placeholder="请输入提现金额" size="40" disabled v-model="CashOutMoney"></fui-input>
				<!-- <view class="" style="margin-top: 30rpx;color: #e1e1e1;">
					可提现金额 ¥ {{WithdrawYue}}
				</view> -->
				<view class="" style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 30rpx;">
					<view class=""
						style="display: block;vertical-align: bottom;width:calc((100% - 30rpx) / 3);text-align: center;height:80rpx;line-height:80rpx;border-radius: 10rpx;margin-top: 30rpx;"
						v-for="(item, index) in CashOutMoneyList" :key="index" @click="onSelectMoney(item, index)"
						:style="[
						{marginRight:(index + 1) % 3 != 0? '15rpx': '0'},
						{backgroundColor:seleceIndex != index? 'rgb(255, 254, 205)': 'rgb(255, 250, 86)'},
						]">
						<text style="font-size: 24rpx;">¥</text>
						<text style="font-size:36rpx;margin-left:10rpx">{{parseInt(item.WithdrawPrice)}}</text>
					</view>
				</view>
			</view>

			<view class="" style="color: #d0d0d0;font-size: 26rpx;margin-top: 30rpx;">
				温馨提示:每天仅限提现一次！
			</view>
		</view>

		<button class="sub-btn" @click="submitCashOut">确定提现</button>

		<uni-popup type="center" ref="redEnvelope" :mask-click="false">
			<view class="redEnvelope">
				<view style="text-align:center;">
					<image :src="baseUrl+'img/meimofank.jpg'" mode="widthFix"
						style="width:500rpx;margin:auto;margin-top:50rpx;"
						@click="showPhoto([baseUrl+'img/meimofank.jpg'])" />
				</view>
				<view style="clear:both;padding:20rpx;text-align:center;color:#FFF;">点开二维码，长按加财务客服微信，接收转账</view>
				<view class="redEnvelope-close" @click="closeRedEnvelope()">
					<view style="margin-top: 6rpx;margin-left: 6rpx;">
						<uni-icons type="closeempty" size="24" color="#d9a647"></uni-icons>
					</view>
				</view>
			</view>
			<!-- <view class="redEnvelope">
				<view style="color: #f7e7b3;margin-top: 180rpx;" v-if="!!isKai">
					<view style="display: flex;justify-content: center;align-items: center;">
						<image src="/static/icon/meimo.png" style="width: 50rpx;height:50rpx;border-radius: 10rpx;"></image>
						<view style="margin-left: 10rpx;font-size: 34rpx;">美模发来的红包！</view>
					</view>
					
					<view style="font-size: 86rpx;margin-top: 36rpx;text-align: center;">
						<text>{{CashOutMoney}}</text><text style="margin-left: 5rpx;font-size: 36rpx;">元</text>
					</view>
				</view>
				 
				 <view style="color: #f7e7b3;margin-top: 180rpx;font-size: 50rpx;text-align: center;" v-if="!isKai">
				 	恭喜发财，大吉大利！
				 </view>
				 
				<view class="redEnvelope-kai" v-if="!isKai" @click="onkaiRedEnvelope">
					<view class="kai-border">
						開
					</view>
				</view>
				
				<view class="redEnvelope-close" @click="$refs.redEnvelope.close()">
					<view style="margin-top: 6rpx;margin-left: 6rpx;">
						<uni-icons type="closeempty" size="24" color="#d9a647"></uni-icons>
					</view>
				</view>
			</view> -->
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CashOutMoneyList: [],
				seleceIndex: null,
				isKai: false,
				Withdrawable: '999.99', // 可提现的金额
				theSameDay: false, // 今日是否提现
				WithdrawYue: '', // 我的余额
				CashOutMoney: '',
				TodayWithdrawCount: '', // 今日兑换次数
				baseUrl: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
		},
		onShow() {
			this.getcardInfo()
		},
		methods: {
			closeRedEnvelope() {
				uni.navigateBack()
			},
			showPhoto(photos) {
				uni.previewImage({
					current: 1,
					urls: photos,
					showmenu: true,
				})
			},
			getcardInfo() {
				this.$httpost('/Withdraw/GetWithdrawSet', {}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.CashOutMoneyList = res.data.WithdrawSet;
						this.WithdrawYue = res.data.WithdrawYue;
						this.TodayWithdrawCount = res.data.TodayWithdrawCount;
						if (res.data.TodayWithdrawCount == 0) this.isKai = false;
					}
				})

			},
			onSelectMoney(item, index) {
				// console.log( parseInt(item.WithdrawPrice))

				if (this.WithdrawYue < parseInt(item.WithdrawPrice)) {
					uni.showToast({
						title: '可提现余额不足，请减少要提现的金额！',
						icon: 'none'
					});
					return false;
				} else {
					this.seleceIndex = index;
					this.CashOutMoney = parseInt(item.WithdrawPrice);
				}
			},
			onkaiRedEnvelope() {
				this.$httpost('/Withdraw/WithdrawReceive', {}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.isKai = true;
					}
				})
			},

			submitCashOut() {

				if (this.TodayWithdrawCount > 0) {
					uni.showToast({
						title: '一天只能提现一次，明天再来吧~',
						icon: 'none'
					})
					return false;
				};

				if (!this.CashOutMoney) {
					uni.showToast({
						title: '请先选择要提现的金额',
						icon: 'none'
					})
					return false;
				};

				if (this.Withdrawable < this.CashOutMoney) {
					uni.showToast({
						title: '当前可提现的金额不足！',
						icon: 'none'
					})
					return false;
				};


				this.$httpost('/Withdraw/WithdrawApply', {
					CashOutMoney: this.CashOutMoney
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.$refs.redEnvelope.open();
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.fui-input__self {
		height: 80rpx !important;
	}

	.fui-input__wrap {
		padding: 0 !important;
		margin-top: 40rpx;
	}

	.fui-input__background {
		bottom: -20rpx !important;
	}

	.redEnvelope {
		background-image: url(../../static/icon/redEnvelope.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 80vw;
		height: 60vh;
		border-radius: 20rpx;
		position: relative;
		// display: flex;
		// justify-content: center;

		&-kai {
			width: 150rpx;
			height: 150rpx;
			background-color: #d9ba80;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 100rpx;
			right: 0;
			left: 0;
			margin: auto;
			box-shadow: 0rpx 4rpx 11rpx 0rpx #565656;

			& .kai-border {
				width: 130rpx;
				height: 130rpx;
				border: 1rpx #d9a647 solid;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 56rpx;
				font-weight: bold;
			}
		}

		&-close {
			border: 5rpx solid #d9a647;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50rpx;
			position: absolute;
			bottom: -120rpx;
			left: 0;
			right: 0;
			margin: auto;
			justify-content: center;
			align-items: center;
			position: absolute;
		}
	}
</style>